<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          评论管理
        </div>
        <div class="w2">
          在评论管理中你可以查看评论id，评论信息等基本信息，同时还可以实现查询评论，删除评论等功能，提供一套可行的评论管理方案
        </div>
        <div class="w2">
          评论管理系统是后台系统中重要的一环,它可以为我们提供用户评论的信息，为进一步销售做准备
        </div>
      </div>
      <img class="imgDri"
           src="../../static/H747fopuTq.jpg">
    </div>
    <div class="index">
      <el-table :data="dataList"
                type=""
                style="width: 100%">
        <el-table-column prop="userName"
                         label="用户名" />
        <el-table-column prop="userComment"
                         label="用户评论" />
        <el-table-column prop="gmtCreate"
                         label="评论时间" />
        <el-table-column prop="carStatus"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       style="color:red;"
                       @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination :page-size="pageSize"
                       layout="prev, pager, next, jumper"
                       :total="total"
                       :current-page="pageNum"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPageComment } from "@/api/mall/comment"
export default {
  name: 'Comment',
  data () {
    return {
      dataList: [],
      pageSize: 5,
      pageNum: 1,
      total: 0
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      getPageComment({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data) {
          this.dataList = res.data.records;
          this.total = Number(res.data.total);
        }
      })
    },
    async deleteHandle (id) {
      deleteCommentById(id).then((response) => {
        if (response.statusCode == 20000) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，修改失败',
            type: 'warning'
          })
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.pageNum = 1
      this.load()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.load()
    },
  }
}
</script>

<style lang="scss" scoped>
.qrcode-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  width: 100%;
  height: 350px;
  // border: 1px solid black;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.form {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-around;
}

.sel {
  width: 310px;
  display: flex;
  // border: 1px solid black;
  justify-content: right;
  align-content: center;
}

.sel2 {
  width: 240px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: right;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.item {
}

.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.searchHead {
  display: flex;
  justify-content: space-between;
}

.searchIuput {
  width: 350px;
}

.sel3 {
  width: 100px;
}
</style>
